<template>
  <div class="view-fill">
    <div
      class="app-container-flex"
      v-show="
        !consumeDetailInfo.visible &&
        !purchReturnInfo.visible &&
        !receivingDetailInfo.visible
      "
    >
      <FullScreen
        v-model="showDialog"
        title="冲销详情"
        @returnBack="returnBack"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <BasicInformation
              :info="infoList"
              :labelWidth="infoList.labelWidth"
            >
            </BasicInformation>
          </div>
        </div>

        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('detailInfo') }}</p>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <PageTable
                v-model:data="tableInfo.data"
                :pager="false"
                :checkBox="false"
                :tab-index="true"
                :field-list="tableInfo.fieldList"
              >
                <template v-slot:col-orderNo="scope">
                  <span class="slip-edit" @click="showDetail(scope.row)">{{
                    scope.row.orderNo
                  }}</span>
                </template>
              </PageTable>
            </div>
          </div>
        </div>
      </FullScreen>
    </div>
    <ConsumeDetail
      v-if="consumeDetailInfo.visible"
      v-model:visible="consumeDetailInfo.visible"
      :id="consumeDetailInfo.id"
      :title="consumeDetailInfo.title"
      @returnModify="getList"
    />
    <ReceivingDetail
      v-if="receivingDetailInfo.visible"
      v-model:visible="receivingDetailInfo.visible"
      :id="receivingDetailInfo.id"
      :title="receivingDetailInfo.title"
      @returnModify="getList"
    />
    <PurchReturnDetail
      v-if="purchReturnInfo.visible"
      v-model:visible="purchReturnInfo.visible"
      :purchReturnId="purchReturnInfo.id"
      @returnModify="getList"
    />
  </div>
</template>

<script setup name="pendReceiptOrderdetails">
import ConsumeDetail from '@/views/stock/consumeOrder/detail'
import ReceivingDetail from '@/views/stock/receiving/detail'
import PurchReturnDetail from '@/views/purch/return/detail'
import { pendReceiptWriteOffRecord } from '@/api/receipt.js'

const { proxy } = getCurrentInstance()
const props = defineProps(['visible', 'orderId', 'detailsRow'])

const consumeDetailInfo = ref({
  visible: false,
  title: '',
  id: '',
})
const receivingDetailInfo = ref({
  visible: false,
  title: '',
  id: '',
})
const purchReturnInfo = ref({
  visible: false,
  id: '',
})
const infoList = ref({
  data: {},
  fieldList: [
    {
      label: '单号',
      value: 'orderNo',
      type: 'text',
    },
    {
      label: '产品名称',
      value: 'commonName',
      type: 'text',
    },
    {
      label: '批号',
      value: 'batchNumber',
      type: 'text',
    },
    {
      label: '供应商',
      value: 'supplierName',
      type: 'text',
    },
    {
      label: '结算方式',
      value: 'settleTypeValue',
      type: 'text',
    },
    {
      label: '订单数量',
      value: 'orderCalcQty',
      type: 'text',
    },
    {
      label: '被冲销数量',
      value: 'writeOffCalcQty',
      type: 'text',
    },
    {
      label: '可开票数量',
      value: 'availableQty',
      type: 'text',
    },
    {
      label: '已开票数量',
      value: 'receiptCalcQty',
      type: 'text',
    },
    {
      label: '状态',
      value: 'statusValue',
      type: 'text',
    },
  ],
  labelWidth: '135px',
})
// 表格相关
const tableInfo = ref({
  api: null,
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
    {
      label: '单号',
      value: 'orderNo',
      type: 'slot',
    },
    {
      label: '冲销数量',
      value: 'calcQty',
    },
    {
      label: '冲销方式',
      value: 'writeOffTypeValue',
    },
    {
      label: '冲销人',
      value: 'createUserName',
    },
    {
      label: '冲销时间',
      value: 'createTime',
    },
  ],
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    proxy.$emit('update:visible', val) // 更新父组件visible
  },
})

function returnBack() {
  proxy.$emit('returnBack', false)
}

function getMain() {
  let params = {
    pendReceiptIdMult: props.orderId,
    curPage: 1,
    pageSize: 999,
  }
  infoList.value.data = props.detailsRow
  pendReceiptWriteOffRecord(params).then((resp) => {
    if (resp && resp.success) {
      tableInfo.value.data = resp.data
    }
  })
}

function showDetail(row) {
  //30 是采购退货
  //15是收货单  25是消耗单
  if (props.detailsRow.orderType === 30) {
    purchReturnInfo.value.id = row.orderId
    purchReturnInfo.value.visible = true
  } else if (props.detailsRow.orderType === 25) {
    //跳转到消耗
    consumeDetailInfo.value.id = row.orderId
    consumeDetailInfo.value.visible = true
    consumeDetailInfo.value.title = '消耗明细'
  } else if (props.detailsRow.orderType === 15) {
    //跳转入库
    receivingDetailInfo.value.id = row.orderId
    receivingDetailInfo.value.visible = true
    receivingDetailInfo.value.title = '收货单明细'
  }
}
onMounted(() => {
  getMain()
})
</script>
<style scoped lang="scss">
:deep(.table-scroll-hidden) > .el-table {
  overflow-y: hidden;
}
:deep(.el-dialog__body) {
  height: 355px;
  display: flex;
  flex-direction: column;
}
</style>
